<template>
  <div class="Order">
    <van-nav-bar title="我的订单" left-text="返回" left-arrow @click-left="onClickLeft" fixed />

    <BgBox>
      <div v-if="isHas">
        <van-tabs v-model="tabIndex" color="#0C34BA" line-height="2" title-active-color="#0C34BA" @change="changeTab">
          <div v-for="(item,index) in tabData" :key="index">
            <van-tab :title="item.title"></van-tab>
          </div>

          <!-- 订单页面区域 -->
          <div v-if=" OrderData.length>0">

            <div class="order-box" v-for="(v,k) in OrderData" :key="v.oid">
              <!-- 中间的隔断 -->
              <div class="geduan"></div>

              <OrderList :info-title-left="v.oid" :date="v.date | formatDate('yyyy-MM-dd hh:mm:ss')" :count="v.count" :total="v.total | decimal" :is-right="true" @confirm-receive="confirmreceive(v,k)" @remove=" removeOrder(v.oid,k)" :is-receive="v.status==2">
                <div class="Onecard-box" v-for="(value,idx) in v.data" :key="idx">
                  <van-card :price="value.price" :desc="value.enname" :title="value.name+' '+ value.rule" :thumb="value.smallImg" :num="value.count" />

                </div>
              </OrderList>

            </div>
          </div>
          <div v-else>

            <van-empty description="没有订单数据" />
          </div>
        </van-tabs>
      </div>
      <div v-else>

        <van-empty description="没有订单数据" />
      </div>
    </BgBox>
  </div>

</template>

<script>
import qs from 'qs'
import BgBox from '@/components/bgbox.vue'
import request from '@/utils/reques'
import OrderList from '@/components/OrderList.vue'
import ProItem from '@/components/pro-item.vue'
export default {
  name: 'Order',
  components: {
    BgBox,
    OrderList,
    ProItem
  },
  data() {
    return {
      // 空格&nbsp
      // 小标，也是订单的状态
      tabIndex: 0,
      tabData: [{ title: '全部' }, { title: '进行中' }, { title: '已完成' }],
      // 订单数据
      OrderData: [],
      // 全部有数据
      isHas: true
    }
  },
  created() {
    this.getOrderDataByStatus()
  },
  methods: {
    changeTab(name, title) {
      this.getOrderDataByStatus()
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    async getOrderDataByStatus() {
      let tokenString = localStorage.getItem('token')
      if (!tokenString) {
        this.$toast('请先登录~')
        return this.$router.push({ name: 'Login' })
      }
      this.$toast.loading({
        message: '获取信息中',
        forbidClick: true,
        duration: 0
      })
      const { data: res } = await request.get('/findOrder', {
        params: {
          appkey: this.appkey,
          tokenString,
          status: this.tabIndex
        }
      })
      console.log(res)
      if (res.code == 700) {
        this.$router.push({ name: 'Login' })
      } else if (res.code == 70000) {
        // 如果全部选项没有订单数据，就没有数据
        if (this.tabIndex == 0 && res.result.length == 0) {
          this.isHas = false
          return
        } else {
          // 根据订单的编号oid进行分类
          let orderDatas = []
          res.result.map((v) => {
            // 查询orderdatas的订单数据，如果有
            for (let i = 0; i < orderDatas.length; i++) {
              if (orderDatas[i].oid == v.oid) {
                orderDatas[i].data.push(v)
                orderDatas[i].count += v.count
                orderDatas[i].total += v.count * v.price
                return
              }
            }
            let o = {}
            o.oid = v.oid
            o.count = v.count
            o.total = v.count * v.price
            o.status = v.status
            o.date = v.createdAt
            o.data = [v]
            orderDatas.push(o)
          })
          this.OrderData = orderDatas
          console.log(this.OrderData)
        }
      }
      this.$toast.clear()
    },
    // 确认收货
    async confirmreceive(item, index) {
      // /receive
      let tokenString = localStorage.getItem('token')
      if (!tokenString) {
        this.$toast('请先登录~')
        return this.$router.push({ name: 'Login' })
      }
      this.$toast.loading({
        message: '获取信息中',
        forbidClick: true,
        duration: 0
      })
      const { data: res } = await request.post('/receive', qs.stringify({ appkey: this.appkey, tokenString, oid: item.oid }))
      if (res.code == 700) {
        this.$router.push({ name: 'Login' })
      } else if (res.code == 80000) {
        if (this.tabIndex == 1) {
          this.OrderData.splice(index, 1)
        }
        item.status = 2
      }
      this.$toast(res.msg)
    },
    // 删除订单
    async removeOrder(oid, index) {
      let tokenString = localStorage.getItem('token')
      if (!tokenString) {
        this.$toast('请先登录~')
        return this.$router.push({ name: 'Login' })
      }
      this.$toast.loading({
        message: '获取信息中',
        forbidClick: true,
        duration: 0
      })
      const { data: res } = await request.post('/removeOrder', qs.stringify({ appkey: this.appkey, tokenString, oid: oid }))
      if (res.code == 90000) {
        this.OrderData.splice(index, 1)
      }
      this.$toast(res.msg)
      this.$toast.clear()
    }
  }
}
</script>

<style lang="less" scoped>
.geduan {
  width: 100%;
  height: 10px;
  background-color: RGB(247, 247, 247);
}
.order-box {
  margin-top: 10px;
}
</style>